<template>
	<view>
		<no-data v-if="!commentList || commentList.length <=0" desc="暂无评论"></no-data>
		<view v-else class="comment">
			<view class="comment-item"
				v-for="(item, index) in commentList" :key="index">
				<!-- 评论用户信息区域 -->
				<view class="info">
					<!-- 用户头像，支持aspectFill模式 -->
					<image mode="aspectFill"
					:src="item.userImage || '/static/tab/my.png'"
					></image>
					<!-- 用户名称和评论时间 -->
					<view class="user">
						<view>{{item.nickName}}</view>
						<view>{{ $util.dateFormat(item.createDate) }}</view>
					</view>
					<!-- 评论星级图标，根据isGood属性决定颜色 -->
					<text :class="{grey: !item.isGood}" class="iconfont icon-haoping2"></text>
				</view>
				<!-- 评论内容 -->
				<view class="content">
					{{item.content}}
				</view>
				<!-- 讲师回复内容，如果有回复则显示 -->
				<view class="replay" v-if="item.children && item.children.content">
					<text>讲师回复：</text>
					<text>{{item.children.content}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			commentList: {
				type: Array, 
	
				default: ()=> [
					{
						"id": 1, // 评论ID
						"nickName": "梦小员", // 用户昵称
						"userImage": null, // 用户头像
						"isGood": 1, // 1好评，0差评
						"content": "梦老师的课程内容好详细，值得学习！", // 评论内容
						"createDate": Date.now(), // 评论创建时间，为了兼容小程序，不能使用 new Date()
						"children": null // 回复内容
					},
					{
						"id": 2, 
						"nickName": "小黄",
						"userImage": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", // 用户头像
						"isGood": 0, 
						"content": "加油梦老师！", 
						"createDate": '2008-12-12 09:09:09',
						"children": {
							"id": 3, 
							"nickName": "苍老师", 
							"userImage": null, 
							"content": "谢谢支持，知行峰-陪你学习，伴你梦想。", 
							"createDate": '2008-12-13 08:09:09', 
						}
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	// 评论区域样式
	.comment {
		font-size: 30rpx; // 字体大小
		padding: 0 36rpx; // 左右内边距
		background-color: #fff; // 背景颜色
		.comment-item {
			margin-top: 36rpx; // 上外边距
			border-bottom: $mxg-underline; // 底部边框
			.info {
				display: flex; // 弹性布局
				align-items: center; // 垂直居中
				image {
					width: 70rpx; // 宽度
					height: 70rpx; // 高度
					border-radius: 50rpx; // 圆角
					margin-right: 20rpx; // 右外边距
				}
				.user {
					font-weight: bold; // 字体加粗
					line-height: 33rpx; // 行高
					:last-child {
						color: #999; // 文字颜色
						font-size: 25rpx; // 字体大小
						font-weight: normal; // 正常字体
					}
				}
				:last-child {
					margin-left: auto; // 自动左边距
					font-size: 35rpx; // 字体大小
					color: #ff001b; // 文字颜色
				}
				.grey {
					color: $mxg-text-color-grey; // 灰色文字
				}
			}

			.content {
				margin: 25rpx 0; // 上下外边距
			}

			.replay {
				background-color: #F8F9FB; // 背景颜色
				padding: 15rpx; // 内边距
				border-radius: 10rpx; // 圆角
				margin-bottom: 30rpx; // 下外边距
				color: #7d828f; // 文字颜色
			}
		}
	}
</style>
